<script setup>
	import { computed, ref, watch } from 'vue'
	import { ApiOutlined, SearchOutlined } from '@ant-design/icons-vue'
	import { useApiDatasetStore } from '@/views/plugin/dashboard/store/apiDataset'

	const props = defineProps({
		apiList: {
			type: Array,
			default: () => []
		}
	})

	const emit = defineEmits(['change'])
	const store = useApiDatasetStore()
	const searchValue = ref('')

	// 过滤后的API列表
	const filteredApiList = computed(() => {
		if (!searchValue.value) {
			return props.apiList
		}
		return props.apiList.filter(
			(api) =>
				api.path.toLowerCase().includes(searchValue.value.toLowerCase()) ||
				(api.summary && api.summary.toLowerCase().includes(searchValue.value.toLowerCase())) ||
				(api.description && api.description.toLowerCase().includes(searchValue.value.toLowerCase()))
		)
	})

	// 格式化的API选项
	const apiOptions = computed(() => {
		return filteredApiList.value.map((api) => ({
			label: `${api.method} ${api.path}`,
			value: api.path,
			api: api
		}))
	})

	// 当前选中的API信息
	const selectedApiInfo = computed(() => {
		if (!store.formData.itemConfig.apiPath) {
			return null
		}
		return props.apiList.find((api) => api.path === store.formData.itemConfig.apiPath)
	})

	// 处理API选择变化
	const handleApiChange = (apiPath) => {
		const selectedApi = props.apiList.find((api) => api.path === apiPath)
		if (selectedApi) {
			store.setApiPath(apiPath)
			store.setApiMethod(selectedApi.method || 'GET')
			emit('change')
		}
	}

	// 获取请求方法的颜色
	const getMethodColor = (method) => {
		const colors = {
			GET: 'green',
			POST: 'blue',
			PUT: 'orange',
			DELETE: 'red',
			PATCH: 'purple'
		}
		return colors[method] || 'default'
	}

	// 自定义过滤函数
	const filterOption = (input, option) => {
		if (!input) return true
		const searchText = input.toLowerCase()
		const api = props.apiList.find((api) => api.path === option.value)
		if (!api) return false

		// 搜索API路径、方法和描述
		const apiPath = (api.path || '').toLowerCase()
		const apiMethod = (api.method || '').toLowerCase()
		const apiSummary = (api.summary || '').toLowerCase()

		return apiPath.includes(searchText) || apiMethod.includes(searchText) || apiSummary.includes(searchText)
	}

	// 监听搜索值变化
	watch(searchValue, () => {
		// 搜索时可以添加一些额外的逻辑
	})
</script>

<template>
	<div class="api-interface-selector">
		<div class="section-header">
			<api-outlined class="section-icon" />
			<span class="section-title">API接口选择</span>
		</div>

		<div class="selector-content">
			<!-- 搜索框 -->
			<div class="search-section">
				<a-input v-model:value="searchValue" allow-clear placeholder="搜索API接口..." size="large">
					<template #prefix>
						<search-outlined class="search-icon" />
					</template>
				</a-input>
			</div>

			<!-- API接口选择器 -->
			<div class="select-section">
				<a-select
					:filter-option="filterOption"
					:options="apiOptions"
					:value="store.formData.itemConfig.apiPath"
					placeholder="请选择API接口"
					show-search
					size="large"
					@change="handleApiChange"
				>
					<template #option="{ api }">
						<div class="api-option">
							<div class="option-content">
								<div class="option-header">
									<a-tag :color="getMethodColor(api.method)" size="small">
										{{ api.method }}
									</a-tag>
									<span class="api-path">{{ api.path }}</span>
								</div>
								<div v-if="api.summary" class="option-summary">
									{{ api.summary }}
								</div>
							</div>
						</div>
					</template>
				</a-select>
			</div>

			<!-- 选中API的详细信息 -->
			<div v-if="selectedApiInfo" class="api-details">
				<div class="details-header">
					<a-tag :color="getMethodColor(selectedApiInfo.method)" size="small">
						{{ selectedApiInfo.method }}
					</a-tag>
					<span class="api-path-detail">{{ selectedApiInfo.path }}</span>
				</div>

				<div v-if="selectedApiInfo.summary" class="api-summary">
					<span class="summary-label">描述：</span>
					<span class="summary-text">{{ selectedApiInfo.summary }}</span>
				</div>

				<div v-if="selectedApiInfo.description" class="api-description">
					{{ selectedApiInfo.description }}
				</div>

				<!-- 参数信息 -->
				<div v-if="selectedApiInfo.parameters && selectedApiInfo.parameters.length > 0" class="api-parameters">
					<div class="parameters-title">参数信息：</div>
					<div class="parameters-list">
						<div v-for="param in selectedApiInfo.parameters" :key="param.name" class="parameter-item">
							<span class="param-name">{{ param.name }}</span>
							<span class="param-type">{{ param.type }}</span>
							<span v-if="param.required" class="param-required">*</span>
							<span v-if="param.description" class="param-description">- {{ param.description }}</span>
						</div>
					</div>
				</div>
			</div>

			<!-- 无API接口提示 -->
			<div v-if="props.apiList.length === 0" class="empty-state">
				<api-outlined class="empty-icon" />
				<div class="empty-title">暂无可用的API接口</div>
				<div class="empty-description">请检查连接器配置</div>
			</div>

			<!-- 搜索无结果提示 -->
			<div v-else-if="filteredApiList.length === 0" class="empty-state">
				<search-outlined class="empty-icon" />
				<div class="empty-title">未找到匹配的API接口</div>
				<div class="empty-description">请尝试其他搜索关键词</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
	.api-interface-selector {
		width: 100%;
	}

	.section-header {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 16px;
		padding-bottom: 8px;
		border-bottom: 1px solid #f0f0f0;
	}

	.section-icon {
		font-size: 16px;
		color: #1890ff;
	}

	.section-title {
		font-size: 14px;
		font-weight: 600;
		color: #262626;
	}

	.selector-content {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.search-section {
		width: 100%;
	}

	.search-icon {
		color: #bfbfbf;
	}

	.select-section {
		width: 100%;
	}

	.select-section :deep(.ant-select) {
		width: 100%;
	}

	.api-option {
		padding: 4px 0;
	}

	.option-content {
		width: 100%;
	}

	.option-header {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 4px;
	}

	.api-path {
		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
		font-size: 13px;
		color: #262626;
	}

	.option-summary {
		font-size: 12px;
		color: #8c8c8c;
		line-height: 1.4;
	}

	.api-details {
		padding: 16px;
		background: #f6f8fa;
		border: 1px solid #e1e8ed;
		border-radius: 8px;
		margin-top: 8px;
	}

	.details-header {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 12px;
	}

	.api-path-detail {
		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
		font-size: 13px;
		font-weight: 600;
		color: #262626;
	}

	.api-summary {
		margin-bottom: 8px;
		font-size: 13px;
		line-height: 1.5;
	}

	.summary-label {
		font-weight: 600;
		color: #595959;
	}

	.summary-text {
		color: #262626;
	}

	.api-description {
		font-size: 12px;
		color: #8c8c8c;
		line-height: 1.4;
		margin-bottom: 12px;
	}

	.api-parameters {
		margin-top: 12px;
	}

	.parameters-title {
		font-size: 12px;
		font-weight: 600;
		color: #595959;
		margin-bottom: 8px;
	}

	.parameters-list {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.parameter-item {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 12px;
		line-height: 1.4;
	}

	.param-name {
		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
		font-weight: 600;
		color: #262626;
	}

	.param-type {
		color: #8c8c8c;
		font-style: italic;
	}

	.param-required {
		color: #ff4d4f;
		font-weight: bold;
	}

	.param-description {
		color: #8c8c8c;
		flex: 1;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40px 20px;
		text-align: center;
	}

	.empty-icon {
		font-size: 32px;
		color: #d9d9d9;
		margin-bottom: 12px;
	}

	.empty-title {
		font-size: 14px;
		color: #8c8c8c;
		margin-bottom: 4px;
	}

	.empty-description {
		font-size: 12px;
		color: #bfbfbf;
	}

	.ant-tag {
		margin: 0;
	}
</style>
